import React from 'react';

// 导入组件
import CommentCount from './components/CommentCount';
import CommentList from './components/CommentList';
import Forms from './components/Forms';
import Tabs from './components/Tabs';
import { http } from '../utils/http';

// 导入样式
import './App.css';

export class App extends React.Component {
  constructor() {
    super();
    // 组件数据
    this.state = {
      // hot: 热度排序  time: 时间排序
      tabs: [],
      // tabs: [
      //   {
      //     id: 1,
      //     name: '热度',
      //     type: 'hot',
      //   },
      //   {
      //     id: 2,
      //     name: '时间',
      //     type: 'time',
      //   },
      // ],
      active: 'time',
      list: [],
    };
  }
  async componentDidMount() {
    console.log('组件加载完毕准备读取数据');
    // V4 版本是从本地存储中获取
    // localStorage.getItem('list');
    // this.setState({
    //   list: JSON.parse(localStorage.getItem('list') || '[]'),
    // });

    // V5 版本模拟从服务器端获取
    const tabsRes = await http.get('/tabs');
    const listRes = await http.get('/list');

    // 设置页面数据
    this.setState({
      tabs: tabsRes.data,
      list: listRes.data,
    });
  }

  componentDidUpdate() {
    console.log('组件数据发生变化，我要保存数据');
    localStorage.setItem('list', JSON.stringify(this.state.list));
  }

  // 父组件定义tab切换事件处理函数
  changeSortType = (type) => {
    console.log(type);
    if (type === 'hot') {
      const newList = this.state.list.sort((a, b) => {
        // 按照id降序
        return b.id - a.id;
      });
      this.setState({
        list: newList,
        active: type,
      });
    } else {
      // 按时间
      const newList = this.state.list.sort((a, b) => {
        // 按照时间升序
        return new Date(a.time).getTime() - new Date(b.time).getTime();
      });
      this.setState({
        list: newList,
        active: type,
      });
    }
  };

  // 删除评论事件处理函数
  delComment = async (id) => {
    console.log(id);
    // // 删除指定id的评论
    // const newList = this.state.list.filter((item) => item.id !== id);
    // // 设置页面数据
    // this.setState({
    //   list: newList,
    // });
    // 从服务器删除评论
    const res = await http.delete(`/list/${id}`);
    console.log('删除成功', res);

    // 从服务器获取最新的评论列表
    const listRes = await http.get('/list');
    // 设置页面数据
    this.setState({
      list: listRes.data,
    });
  };

  // 点赞点踩实现
  changeAttitude = async (id, attitude) => {
    console.log(id, attitude);
    // const newList = this.state.list.map((item) => {
    //   if (item.id === id) {
    //     return { ...item, attitude };
    //   } else {
    //     return item;
    //   }
    // });
    // // 设置页面数据
    // this.setState({
    //   list: newList,
    // });

    // 更新服务器端数据
    const res = await http.patch(`/list/${id}`, { attitude });
    console.log('更新数据成功', res);

    // 从服务器获取最新的评论列表
    const listRes = await http.get('/list');
    // 设置页面数据
    this.setState({
      list: listRes.data,
    });
  };

  // 发表评论
  addComment = async (txt) => {
    console.log(txt);
    // const comment = {
    //   id: new Date().getTime(),
    //   author: '杨文中',
    //   comment: txt,
    //   time: new Date().toLocaleString(),
    //   attitude: -1,
    // };
    // // 设置页面数据
    // this.setState({
    //   list: [comment, ...this.state.list],
    // });

    // 提交评论数据到服务器
    const res = await http.post('/list', {
      author: '作者',
      comment: txt,
      time: new Date().toLocaleString(),
      attitude: 1,
    });
    console.log('发表评论成功', res);
    // 从服务器获取最新的评论列表
    const listRes = await http.get('/list');

    // 设置页面数据
    this.setState({
      list: listRes.data,
    });
  };

  render() {
    console.log(this.state.list);
    return (
      <div className="comment-container">
        <CommentCount number={this.state.list.length} />
        <Tabs
          tabs={this.state.tabs}
          active={this.state.active}
          changeSortType={this.changeSortType}
        />
        <Forms addComment={this.addComment} />
        <CommentList
          list={this.state.list}
          delComment={this.delComment}
          changeAttitude={this.changeAttitude}
        />
      </div>
    );
  }
}
